<template>
    <div>
        <mHeader ref="mHeader" :list="loginInfo" :user="user"></mHeader>
        <div class="main-con">
            <div class="wrap-con">
                <div class="list_banner">
                    <div class="menu" v-popover:popover style="position: relative;">
                        <div v-for="(item, index) in menuList" :key="item.id" v-show="index < 4">
                            <p>{{ item.name }}</p>
                            <div class="pdao" style="position: relative;" @mouseleave="showpopover = false"
                                @mouseover="getPinDao(item)">
                                <span @click="goPage('/searchHome', e.id)" v-for="(e, d) in item.second" :key="e.id"
                                    class="titless"
                                    :style="{ whiteSpace: d < 5 ? 'nowrap' : '', display: 'inline-block' }">
                                    {{ e.name }}
                                    <span style="display: inline-block;width: 12px;text-align: center;">/</span>

                                    <!-- <span v-if="indexs != (item.second.length - 1) && indexs<11">/</span> -->
                                </span>
                                <!-- 
                                <span style="position: absolute;right: 10px;bottom: 0;line-height: 20px;">
                                    <span style="background-color: #1068E7;">></span>
                                </span> -->
                            </div>
                        </div>
                        <div v-show="showpopover" class="HoverMenu" style="" @mouseover="showpopover = true"
                            @mouseleave="showpopover = false">
                            <p style="font-size: 24px;font-weight: bold;margin-bottom: 0.83rem;color: #000;">{{
                                pindao.name
                            }}
                            </p>
                            <div style="position:relative">
                                <span @click="goPage('/searchHome', i.id)" v-for="i in pindao.second" :key="i.id"
                                    style="color: #000;cursor: pointer;font-size: 18px;line-height: 35px;padding: 3px;">
                                    {{ i.name }}
                                    <span style="display: inline-block;width: 6px;text-align: center;">/</span>
                                    <!-- <span v-if="indexs != (item.second.length - 1) && indexs<11">/</span> -->
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-containers">
                        <swiper :options="swiperOptions" ref="mySwiper">
                            <!-- Swiper 幻灯片 -->
                            <swiper-slide v-for="item in slides" :key="item.id">
                                <img style="cursor: pointer;" :src="item.image" alt="Slide" @click="gourl(item.url)" />
                            </swiper-slide>
                            <!-- 前进/后退按钮 -->
                            <div class="swiper-button-prev" slot="button-prev">
                                <img src="@/assets/img/left.svg" alt="">
                            </div>
                            <div class="swiper-button-next" slot="button-next">
                                <img src="@/assets/img/right.svg" alt="">
                            </div>
                            <div class="swiper-pagination" slot="pagination"></div>
                        </swiper>
                        <div class="sildTitle">
                            <div v-for="(item, index) in silderTitle" :key="index" @click="gourl(item.url)">{{
                                item.title }}</div>
                        </div>
                    </div>
                </div>
                <div class="main_cont">
                    <div class="left">
                        <div class="leftList">

                            <div style=" overflow-y: auto">
                                <span class="line1" @click="gourl(item.url)" v-for="(item, index) in leftList"
                                    :key="index">{{ item.title }}</span>
                            </div>

                            <div class="phoneCode">
                                <p>{{ temp_title }}</p>
                                <img :src="main_logo" alt="">
                                <div class="links">
                                    <span @click="goPage('/article', 2)">本站声明 / </span>
                                    <span @click="goPage('/article', 3)">用户协议 / </span>
                                    <span @click="goPage('/article', 4)">使用指南 </span>
                                    <span @click="goPage('/article', 5)">合作咨询 / </span>
                                    <span @click="goPage('/article', 2)">意见反馈</span>
                                </div>
                                <span>工信部备案号：{{ site_icp }}</span>
                                <div class="gan">
                                    <img src="@/assets/img/gan.png" alt="">
                                    <span>{{ site_gwa }}</span>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="rightMain">
                        <div class="course">
                            <div :style="{ backgroundImage: 'url(' + item.image + ')' }" v-for="(item, index) in text"
                                :key="index" @click="gourl(item.url)">
                                <div class="title" style="cursor: pointer;">
                                    {{ item.title }}
                                </div>
                                <span>{{ item.introd }}</span>
                            </div>

                        </div>
                        <div class="typeChose" v-if="$store.getters.isMobile" ref="choseType">
                            <div :class="{ active: typeName == 'zlan' }" @click="getTypename('zlan')">
                                <span class="title" style="flex-shrink: 0;white-space: nowrap;">专栏</span>
                            </div>
                            <div :class="{ active: typeName == 'wku' }" @click="getTypename('wku')">
                                <span class="title" style="flex-shrink: 0;white-space: nowrap;">文库</span>
                            </div>
                            <div :class="{ active: typeName == 'rwu' }" @click="getTypename('rwu')">
                                <span class="title" style="flex-shrink: 0;white-space: nowrap;">人物</span>
                            </div>
                        </div>
                        <div class="contentList">
                            <!-- 专栏 -->
                            <div class="type"
                                v-if="!$store.getters.isMobile || ($store.getters.isMobile && typeName == 'zlan')">
                                <div class="tab">
                                    <span v-if="!$store.getters.isMobile" class="title"
                                        style="flex-shrink: 0;white-space: nowrap;">专栏</span>
                                    <div>
                                        <div v-for="item in zType" :key="item.id"
                                            :class="{ actives: zt == item.id, line1: true }" @click="getz(item.id)">{{
                                                item.name
                                            }}
                                            <div class="botLine">
                                                <span :class="{ active: item.id == zt }"></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="list infinite-list">
                                    <div class="list_box" v-for="(item, index) in zList" :key="index"
                                        @click="goPage('/columnIndex', item.id)">
                                        <img :src="item.thumb" alt="">
                                        <div class="list_t">
                                            <span class="line2"><b>【{{ item.title }}】</b>{{
                                                item.intro }}</span>
                                            <div>
                                                <span class="line1"
                                                    @click.stop="goPage('/association/youping', item.user_id)">{{
                                                        item.user_nickname }}</span>
                                                <div>
                                                    <img src="@/assets/img/eye.png" alt="">
                                                    <span>{{ item.views }}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- <div v-if="zloading" v-loading="zloading">
                                    </div> -->
                                    <el-empty description="没有内容了" v-if="zList.length == 0"></el-empty>

                                </div>
                            </div>
                            <!-- 文库 -->
                            <div class="type"
                                v-if="!$store.getters.isMobile || ($store.getters.isMobile && typeName == 'wku')">
                                <div class="tab">
                                    <span v-if="!$store.getters.isMobile" class="title"
                                        style="flex-shrink: 0;white-space: nowrap;">文库</span>
                                    <div>

                                        <div v-for="item in wType" :key="item.id"
                                            :class="{ actives: wt == item.id, line1: true }" @click="getw(item.id)">{{
                                                item.name
                                            }}
                                            <div class="botLine">
                                                <span :class="{ active: item.id == wt }"></span>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                                <div class="list infinite-list">
                                    <div class="list_box" v-for="(item, index) in wList" :key="index"
                                        @click="goPage1('/articleRead', item.id)">
                                        <img :src="item.thumb" alt="">
                                        <div class="list_t">
                                            <span class="line2" style="font-weight: bold;">{{ item.title }}</span>
                                            <div>
                                                <span class="line1"
                                                    @click.stop="goPage('/association/youping', item.user_id)">{{
                                                        item.user_nickname }}</span>
                                                <div>
                                                    <img src="@/assets/img/eye.png" alt="">
                                                    <span>{{ item.views }}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- <div v-if="wloading" v-loading="wloading">
                                    </div> -->
                                    <el-empty description="没有内容了" v-if="wList.length == 0"></el-empty>

                                    <!-- <div style="padding-bottom: 50px;text-align: center;">
                                        <span>没有更多了....</span>
                                    </div> -->
                                </div>
                            </div>
                            <!-- 人物 -->
                            <div class="type"
                                v-if="!$store.getters.isMobile || ($store.getters.isMobile && typeName == 'rwu')">
                                <div class="tab">
                                    <span v-if="!$store.getters.isMobile" class="title">人物</span>
                                    <div>
                                        <div :title="item.name" v-for="(item, index) in rType" :key="index"
                                            :class="rt == item.id ? 'actives' : ''" @click="getr(item.id)">{{ item.name
                                            }}
                                            <div class="botLine">
                                                <span :class="{ active: item.id == rt }"></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="list infinite-list">
                                    <div class="list_box" v-for="(item, index) in rList" :key="index"
                                        @click="goPage('/association/youping', item.id)">
                                        <img :src="item.avatar" alt="">
                                        <!-- @/assets/img/t2.png -->
                                        <div class="list_t2">
                                            <div class="name vip">
                                                <span class="line2" style="font-weight: bold;">{{ item.user_nickname
                                                    }}</span>
                                                <img v-if="item.is_auth == 1" src="@/assets/img/vip.svg" alt="">
                                            </div>
                                            <span class="line1 sign">{{ item.signature }}</span>
                                            <div class="hot">
                                                <div>
                                                    <img src="@/assets/img/gz.png" alt="">
                                                    <span>{{ item.fans }}</span>
                                                </div>
                                                <div style="width: 120px">
                                                    <img src="@/assets/img/update.png" alt="">
                                                    <span>{{ item.nums }}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- <div v-if="rloading" v-loading="rloading">
                                    </div> -->
                                    <el-empty description="没有内容了" v-if="rList.length == 0"></el-empty>

                                    <!-- <div style="padding-bottom: 50px;text-align: center;">
                                        <span>没有更多了....</span>
                                    </div> -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <el-dialog :visible.sync="is_mobile" width="600px" center :close-on-click-modal="false" :show-close="false">
                <div class="dia_main3">
                    <div class="right">
                        <p class="title">
                            绑定手机号
                        </p>
                        <div class="input">
                            <el-input type="number" placeholder="请输入手机号码" v-model="mobile" :maxlength="11" />
                            <el-input type="number" v-loading="loading" placeholder="请输入验证码" v-model="code"
                                :maxlength="6">
                                <template slot="append">
                                    <span @click="getDown(0)" :style="{ cursor: downtime == 60 ? 'pointer' : '' }"
                                        class="getCode">{{ downtime == 60 ? '获取验证码' : downtime + '秒后重新发送' }}</span>
                                </template>
                            </el-input>
                        </div>
                        <el-button type="primary" round @click="wxBind">确认绑定</el-button>
                    </div>
                </div>
            </el-dialog>
        </div>
    </div>
</template>
<script>

import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import 'swiper/css/swiper.css';
import { Loading } from 'element-ui';
export default {
    components: {
        Swiper,
        SwiperSlide,
    },
    data() {
        return {
            pindao: {},
            showpopover: false,
            loading: false,
            openid: '',
            timer: '',
            downtime: 60,
            code: '',
            mobile: '',
            is_mobile: false,
            menuList: [],
            swiperOptions: {
                loop: true,
                autoplay: {
                    delay: 3000,
                    disableOnInteraction: false,
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                pagination: {
                    el: '.swiper-pagination', // 指定指示器的容器，对应上面的 div 的 class
                    clickable: true // 允许点击小圆点切换幻灯片
                },
            },
            // 幻灯片数据
            slides: [],
            silderTitle: [],
            leftList: [],
            zList: [],
            ztotalPage: 1,
            zpageNum: 1,
            wList: [],
            wtotalPage: 1,
            wpageNum: 1,
            rList: [],
            rtotalPage: 1,
            rpageNum: 1,
            zType: [],
            wType: [],
            rType: [{ id: 1, name: '发布' }, { id: 2, name: '优品' }, { id: 3, name: '评论' }, { id: 4, name: '分享' }],
            zt: 0,
            wt: 0,
            rt: 1,
            text: [],
            temp_title: '',
            site_icp: '',
            site_gwa: '',
            main_logo: '',
            loginInfo: [],
            user: {},
            typeName: 'zlan'

        };
    },
    watch: {
        isMobile(n) {
            console.log(n);

        }
    },
    computed: {
        // 获取 Swiper 实例
        swiper() {
            return this.$refs.mySwiper.$swiper;
        },
        old_code() {
            return this.$route.query.code
        },
        isMobile() {
            return this.$store.getters.isMobile
        },

    },
    created() {
        this.getOption()
        this.getzList()
        this.getwList()
        this.getrList()
    },
    beforeDestroy() {
        window.removeEventListener('scroll', this.handleScroll); // 移除监听
    },

    mounted() {
        window.addEventListener('scroll', this.handleScroll); // 监听滚动事件

        let token = localStorage.getItem('token');

        let code = this.$route.query.code
        if (code && !token) {
            this.wxLogin(code)
        }

        if (code && token) {
            this.reBind(code)
        }

        this.getData()

    },
    methods: {
        getTypename(name) {
            this.typeName = name
            this.$nextTick(() => {
                const headerHeight = this.$refs.choseType.offsetHeight;
                const target = this.$refs.choseType;
                window.scrollTo({
                        top: 0,
                    });
                if (target) {
                    const top = target.getBoundingClientRect().top + window.pageYOffset - headerHeight;
                    window.scrollTo({
                        top: top,
                    });
                }
            });
        },
        getPinDao(info) {
            this.pindao = info
            this.showpopover = true
        },
        // 发送短信验证码
        getSmsSend() {
            this.loading = true

            let params = {
                account: this.mobile,
                nocheck: this.nocheck,
                openid: this.openid
            }
            this.$api.smsSend(params).then(res => {
                let response
                this.loading = false
                if (res.data.code == 1) {
                    response = res.data.data
                    this.timer = setInterval(() => {

                        if (this.downtime > 0) {
                            this.downtime = this.downtime - 1
                            return
                        } else {
                            this.downtime = 60
                            this.timer = null;
                            clearTimeout(this.timer)
                        }
                    }, 1000)
                } else {
                    this.downtime = 60
                }
            })
        },
        // 微信登录绑定手机号
        wxBind() {
            let params = {
                mobile: this.mobile,
                code: this.code,
                openid: this.openid
            }
            this.$api.wxbind(params).then(res => {
                let response
                if (res.data.code == 1) {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    })
                    this.is_mobile = false
                } else {
                    console.log('有异常判断')
                    if (this.old_code) {
                        console.log('有old_code参数')
                        // this.$router.replace('/index')
                        this.$router.replace('/index').then(() => {
                            window.location.reload()
                        })
                    }

                }
            })
        },
        // 点击获取验证码
        getDown(nocheck) {
            this.nocheck = nocheck
            if (!this.mobile) {
                this.$message({
                    message: '请输入手机号',
                    type: 'error'
                })
                return
            }

            if (this.timer) {
                return
            }

            this.getSmsSend()
        },
        // 微信登录
        wxLogin(code) {
            let params = {
                code: code
            }

            this.$api.wxlogin(params).then(res => {
                let response = res.data.data
                if (res.data.code == 1) {
                    this.openid = response.openid
                    let nomobile = response.nomobile
                    if (nomobile == 1) {
                        this.is_mobile = true
                    } else {
                        this.$message({
                            message: '登录成功',
                            type: 'success'
                        })
                        // 设置正常缓存
                        localStorage.setItem('token', response.token);
                        localStorage.setItem('userInfo', JSON.stringify(response.user));
                        this.user = response.user
                    }
                    console.log('微信登录')
                } else {
                    console.log('有异常判断')
                    if (this.old_code) {
                        console.log('有old_code参数')
                        // this.$router.replace('/index')
                        this.$router.replace('/index').then(() => {
                            window.location.reload()
                        })
                    }

                }
            })
        },

        // 微信登录
        reBind(code) {
            let params = {
                code: code
            }

            this.$api.rebind(params).then(res => {
                let response = res.data.data
                if (res.data.code == 1) {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    })
                }
                else {
                    console.log('有异常判断')
                    if (this.old_code) {
                        console.log('有old_code参数')
                        // this.$router.replace('/index')
                        this.$router.replace('/index').then(() => {
                            window.location.reload()
                        })
                    }

                }
            })
        },

        handleScroll() {
            const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            const windowHeight = window.innerHeight;
            const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
            // 判断是否滚动到底部
            if (scrollTop + windowHeight >= scrollHeight - 20) {
                console.log('触底');

                this.load()
                this.load2()
                this.load3()
            }
        },
        // 点击跳转外部链接
        gourl(url) {
            if (url) {
                window.open(url, '_blank', 'noopener,noreferrer');

            }
        },
        // 获取后台系统配置
        getOption() {
            let params = {
                type: 'main_logo,temp_title,site_gwa,site_icp,jbly'
            }
            this.$api.getOptions(params).then(res => {
                let response
                if (res.data.code == 1) {
                    response = res.data.data
                    console.log(response);
                    this.temp_title = response.temp_title
                    this.site_icp = response.site_icp
                    this.site_gwa = response.site_gwa
                    this.main_logo = response.main_logo
                }
            })
        },
        goPage(url, id) {
            if (id) {
                // 另页打开
                const route = this.$router.resolve({
                    path: url,
                    query: { id }
                });
                window.open(route.href, '_blank');
            }
        },
        goPage1(url, aid) {
            // 另页打开
            const route = this.$router.resolve({
                path: url,
                query: { aid }
            });

            window.open(route.href, '_blank');
        },

        getData() {
            this.$api.getIndex().then(res => {
                let response
                if (res.data.code == 1) {
                    response = res.data.data
                    this.menuList = response.channel
                    this.slides = response.banner1
                    this.silderTitle = response.banner2
                    this.text = response.text
                    this.leftList = response.left
                    this.zType = [{ id: 0, name: '全部' }, ...response.cate1]
                    this.wType = [{ id: 0, name: '全部' }, ...response.cate2]
                    this.loginInfo = [...response.login]
                }
            })
        },
        // 加载更多数据
        load() {
            var page = this.zpageNum
            //如果请求未结束就返回不连续请求
            if (this.zloading) {
                return
            }
            //数据请求完成无更多数据时
            if (page >= this.ztotalPage) {
                //this.getzList()

                return false;
            }
            page = parseInt(page) + 1
            this.zpageNum = page
            this.getzList()
        },
        // 专栏列表
        getzList() {
            this.zloading = true
            let params = {
                page: this.zpageNum,
                tid: this.zt
            }

            this.$api.getzList(params).then(res => {
                let response
                if (res.data.code == 1) {
                    this.ztotalPage = res.data.data.last_page
                    this.zList = this.zList.concat(res.data.data.data);
                    this.zloading = false
                }
            })
        },
        load2() {
            var page = this.wpageNum
            //如果请求未结束就返回不连续请求
            if (this.wloading) {
                return
            }
            //数据请求完成无更多数据时
            if (page >= this.wtotalPage) {
                //this.getwList()

                return false;
            }
            page = parseInt(page) + 1
            this.wpageNum = page
            this.getwList()
        },
        // 文库列表
        getwList() {
            this.wloading = true
            let params = {
                page: this.wpageNum,
                tid: this.wt
            }

            this.$api.getwList(params).then(res => {
                let response
                if (res.data.code == 1) {
                    this.wtotalPage = res.data.data.last_page
                    this.wList = this.wList.concat(res.data.data.data);
                    this.wloading = false
                }

            })
        },
        load3() {
            var page = this.rpageNum
            //如果请求未结束就返回不连续请求
            if (this.rloading) {
                return
            }
            //数据请求完成无更多数据时
            if (page >= this.rtotalPage) {
                //this.getrList()

                return false;
            }
            page = parseInt(page) + 1
            this.rpageNum = page
            this.getrList()
        },
        // 人物列表
        getrList() {
            this.rloading = true
            let params = {
                page: this.rpageNum,
                type: this.rt
            }

            this.$api.getrList(params).then(res => {
                if (res.data.code == 1) {
                    this.rtotalPage = res.data.data.last_page
                    this.rList = this.rList.concat(res.data.data.data);
                    this.rloading = false
                }

            })
        },
        getz(i) {
            this.zt = i
            this.zpageNum = 1
            this.zList = []
            this.getzList()
        },
        getw(i) {
            this.wt = i
            this.wpageNum = 1
            this.wList = []
            this.getwList()
        },
        getr(i) {
            this.rt = i
            this.rpageNum = 1
            this.rList = []
            this.getrList()
        }
    },
}
</script>
<style lang="scss" scoped>
.dia_main3 {
    .right {
        width: 100%;
        padding: 0 2rem;

        .title {
            margin-bottom: 2rem;
            padding-top: 0;
        }

        .input {
            padding: 0 0.2rem;
            margin-bottom: 2.76rem;

            .getCode {
                font-size: 0.9rem;
            }

            ::v-deep .el-input {
                margin-bottom: 1rem;
                height: 3rem;
                width: 100%;
                display: flex;

                .el-input-group__append {
                    padding: 0 1rem;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    height: 3rem;
                    width: 10.5rem;

                }

                .el-input__inner {
                    font-size: 0.9rem;
                    border-radius: 0 !important;
                    background-color: #F7F7F7;
                    height: 3rem;
                    width: 100%;
                    display: inline-block;
                }
            }

            .check {
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-weight: 400;
                font-size: 0.83rem;
                color: #666666;

                ::v-deep .el-checkbox__label {
                    font-weight: 400;
                    font-size: 0.83rem;
                    color: #666666;
                    padding-left: 0.5rem;
                }

                ::v-deep .el-checkbox__inner {
                    width: 0.83rem;
                    height: 0.83rem;
                }

                span {
                    cursor: pointer;
                }
            }
        }

        .resj {
            margin-top: 3rem;
        }
    }

}

.dia_main3 {
    display: flex;

    >div {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 50%;

        .title {
            font-size: 1.3rem;
            font-weight: bold;
            color: #000;
            padding: .8rem 1.5rem;
        }
    }

    .left {
        border-right: 1px solid #EFEFEF;

        .title {
            padding: .8rem 1.5rem;
            border-radius: 1.5rem;
            background-color: #F0F3FE;
            margin-bottom: 4rem;
        }

        >img {
            width: 10.42rem;
            height: 10.42rem;
            margin-bottom: 3rem;
        }

        .we {
            display: flex;
            align-items: center;

            font-size: 0.8rem;

            img {
                width: 1.5rem;
                height: 1.5rem;
            }

            span {
                font-weight: bold;
                font-size: 1rem;
                margin-right: 0.4rem;
            }
        }

        .collect {
            display: flex;
            align-items: center;
            font-size: 0.8rem;
            margin-top: 4rem;
            flex: 1;
            align-items: flex-end;
            color: #666666;
            text-decoration: none;

            img {
                width: 1.0rem;
                height: 1.0rem;
            }
        }
    }

    .right {
        padding: 0 3rem;

        .title {
            margin-bottom: 3.5rem;
        }

        .input {
            padding: 0 0.5rem;
            margin-bottom: 2.76rem;

            ::v-deep .el-input {
                margin-bottom: 1rem;
                height: 3rem;
                width: 100%;

                .el-input__inner {
                    font-size: 0.9rem;
                    border-radius: 1.5rem;
                    background-color: #F7F7F7;
                    height: 3rem;
                    width: 100%;

                }
            }

            .check {
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-weight: 400;
                font-size: 0.83rem;
                color: #666666;

                // ::v-deep .el-checkbox__label {
                //     font-weight: 400;
                //     font-size: 0.83rem;
                //     color: #666666;
                //     padding-left: 0.5rem;
                // }

                // ::v-deep .el-checkbox__inner {
                //     width: 0.83rem;
                //     height: 0.83rem;
                // }

                span {
                    cursor: pointer;
                }
            }
        }

        ::v-deep .el-button {
            width: 100%;
            font-size: 1rem;
            height: 3rem;
            line-height: 3rem;
            padding: 0;
            border-radius: 1.5rem;
        }

        .resj {
            cursor: pointer;
            display: flex;
            align-items: center;
            font-size: 0.8rem;
            margin-top: 5.4rem;
            flex: 1;
            align-items: flex-end;
        }
    }

}





.main-con {
    .wrap-con {
        width: 100%;

        .list_banner {
            display: flex;



            .menu {
                width: 300px;
                background-color: #1068E7;
                padding: 20px;
                box-sizing: border-box;
                height: 640px;
                margin-right: 1.04rem;
                flex-shrink: 0;
                padding-right: 0;

                >div {
                    margin-bottom: 1.4rem;

                    &:last-child {
                        margin-bottom: 0;
                    }

                    >p {
                        line-height: 1.25rem;
                        font-family: Microsoft YaHei;
                        font-weight: bold;
                        font-size: 1.25rem;
                        color: #FFFFFF;
                        margin-bottom: 0.53rem;
                    }

                    &:last-child {
                        margin-bottom: 0;
                    }

                    >div {
                        line-height: 1.6rem;
                        height: 4.8rem;

                        span {
                            cursor: pointer;
                            font-weight: 400;
                            font-size: 0.94rem;
                            color: #FFFFFF;
                            margin-right: 0.08rem;
                            // line-height: 1.33rem;
                        }
                    }
                }
            }


            .swiper-containers {
                width: 1280px;
                height: 640px;
                position: relative;

                ::v-deep .swiper-container {
                    width: 1280px;
                    height: 640px;

                    .swiper-pagination {
                        display: none;
                    }

                    .swiper-button-prev {
                        left: 0;
                        width: 2.55rem;
                        height: 2.55rem;
                    }

                    .swiper-button-prev:after {
                        content: '';
                    }

                    .swiper-button-next:after {
                        content: '';
                    }

                    .swiper-button-next {
                        right: 0;
                        width: 2.55rem;
                        height: 2.55rem;
                    }
                }

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }

                .sildTitle {
                    position: absolute;
                    z-index: 8;
                    bottom: 1.41rem;
                    padding: 0 2.55rem;
                    box-sizing: border-box;
                    width: 100%;
                    display: flex;
                    align-items: center;

                    div {
                        width: 11.46rem;
                        margin-right: 40px;
                        cursor: pointer;
                        height: 4.17rem;
                        background: rgba($color: #000000, $alpha: .5);
                        border-radius: 0.42rem;
                        font-family: Microsoft YaHei;
                        font-weight: bold;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 1.46rem;
                        color: #FFFFFF;
                        line-height: 1.25rem;

                        &:last-child {
                            margin-right: 0;
                        }
                    }
                }
            }
        }

        .main_cont {
            margin-top: 1.35rem;
            display: flex;

            .left {
                margin-right: 1.04rem;
                flex-shrink: 0;

                .leftList {
                    position: -webkit-sticky;
                    position: sticky;
                    top: 98px;
                    box-sizing: border-box;
                    width: 300px;

                    .line1 {

                        padding: 0 0.9rem;
                        font-weight: 400;
                        font-size: 1.25rem;
                        color: #333333;
                        line-height: 2.5rem;
                        display: block;
                        cursor: pointer;
                        background-color: #E7F1FE;

                        &:hover {
                            color: #1068E7;
                        }

                        &:first-child {
                            padding-top: 0.8rem;
                        }


                        &:last-child {
                            padding-bottom: 0.8rem;
                        }

                    }

                    .phoneCode {
                        background-color: #E5E5E5;
                        margin-top: 1.04rem;
                        width: 15.68rem;
                        height: 18.65rem;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        padding: 1.15rem 0.78rem;

                        p {
                            font-weight: bold;
                            font-size: 1.04rem;
                            color: #333333;
                            margin-bottom: 0.8rem;
                        }

                        >img {
                            width: 6.88rem;
                            height: 6.88rem;
                        }

                        .links {
                            font-weight: 400;
                            font-size: 20px;
                            color: #333333;
                            text-align: center;
                            margin-top: 1.6rem;
                            margin-bottom: 1.04rem;
                            width: 285px;

                            span {
                                cursor: pointer;

                            }
                        }

                        >span {
                            font-weight: 400;
                            font-size: 0.73rem;
                            color: #999999;
                        }

                        .gan {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            margin-top: 0.5rem;
                            font-weight: 400;
                            font-size: 0.73rem;
                            color: #999999;

                            img {
                                width: 0.94rem;
                                height: auto;
                                margin-right: 0.6rem;
                            }
                        }
                    }
                }


            }

            .rightMain {
                width: 66.67rem;

                .course {
                    display: flex;
                    flex-wrap: wrap;
                    align-items: center;
                    width: 66.67rem;

                    >div {
                        margin-bottom: 1.15rem;

                        &:nth-child(3n-1) {
                            margin: 0 21.5px;
                            margin-bottom: 1.15rem;
                        }

                        width: 21.46rem;
                        height: 7.81rem;
                        background-size: cover;
                        background-position: center center;
                        background-repeat: no-repeat;
                        padding: 1.5rem 1.2rem;

                        .title {
                            font-weight: bold;
                            font-size: 1.46rem;
                            color: #333333;
                        }

                        span {
                            font-weight: 400;
                            font-size: 1.04rem;
                            color: #FFFFFF;
                        }
                    }
                }

                .contentList {
                    display: flex;
                    margin-top: 1rem;

                    .type {
                        &:nth-child(2) {
                            margin: 0 1.05rem 0;
                        }

                        width: 21.46rem;

                        .tab {
                            display: flex;
                            position: -webkit-sticky;
                            position: sticky;
                            top: 5rem;

                            background-color: #fff;
                            z-index: 8;
                            height: 3.1rem;

                            .title {
                                font-weight: bold;
                                font-size: 1.46rem;
                                color: #000000;
                                white-space: nowrap;
                                padding-bottom: 1.25rem;
                            }

                            >div {
                                display: flex;
                                align-items: flex-end;
                                margin: 0 2.1rem 0 1.67rem;
                                font-weight: 400;
                                font-size: 1.15rem;
                                color: #333333;
                                flex: 1;

                                >div {
                                    cursor: pointer;
                                    margin-right: 30px;
                                    margin-right: 8px;
                                    width: 75px;
                                    padding-bottom: 1.25rem;
                                    text-align: center;

                                    &:last-child {
                                        margin-right: 0;
                                    }
                                }

                                .actives {
                                    color: #1068E7;
                                    font-weight: bold;
                                    position: relative;
                                }

                                .botLine {
                                    width: 80%;
                                    height: 3px;
                                    box-sizing: content-box;
                                    position: relative;
                                    bottom: 10px;
                                    position: absolute;
                                    left: 10%;

                                    >span {
                                        position: absolute;
                                        left: 0;
                                        top: 0;
                                        display: inline-block;
                                        width: 0;
                                        height: 3px;
                                        background-color: #1068E7;
                                        border-radius: 3px;
                                    }

                                    .active {
                                        animation: expandWidth .5s forwards;
                                    }

                                    @keyframes expandWidth {
                                        0% {
                                            width: 0;
                                        }

                                        100% {
                                            width: 100%;
                                        }
                                    }
                                }
                            }
                        }
                    }

                    .list {

                        margin-top: 2px;

                        .list_box {
                            cursor: pointer;
                            display: flex;
                            align-items: center;
                            width: 21.46rem;
                            height: 6.77rem;
                            border: 1px solid #C3DCFB;
                            margin-bottom: 1.04rem;
                            padding: 1.04rem 1.6rem 0.94rem 0.99rem;

                            >img {
                                width: 4.17rem;
                                height: 4.17rem;
                                border-radius: 50%;
                                flex-shrink: 0;
                            }

                            .list_t {
                                flex: 1;

                                margin-left: 0.99rem;
                                display: flex;
                                justify-content: space-between;
                                flex-direction: column;
                                height: 100%;
                                width: 14.27rem;

                                >span {
                                    font-weight: 400;
                                    font-size: 1.15rem;
                                    color: #000000;
                                }

                                >div {
                                    display: flex;
                                    align-items: center;
                                    justify-content: space-between;

                                    >span {
                                        font-weight: 400;
                                        font-size: 1.04rem;
                                        color: #999999;
                                    }

                                    >div {
                                        font-weight: 400;
                                        font-size: 0.94rem;
                                        color: #999999;

                                        img {
                                            width: 1.2rem;
                                            height: 0.83rem;
                                            margin-right: 0.3rem;
                                        }
                                    }
                                }
                            }

                            .list_t2 {
                                margin-left: 0.99rem;
                                display: flex;
                                justify-content: space-between;
                                flex-direction: column;
                                height: 100%;
                                width: 14.27rem;

                                .name {
                                    display: flex;
                                    align-items: center;
                                    font-weight: 400;
                                    font-size: 1.15rem;
                                    color: #333333;

                                    img {
                                        width: 1.25rem;
                                        height: 1.25rem;
                                        margin-left: 0.7rem;
                                        flex-shrink: 0;
                                    }
                                }

                                .vip {
                                    // color: #1068E7;

                                }

                                .sign {
                                    width: 100%;
                                    font-weight: 400;
                                    font-size: 1.04rem;
                                    color: #666666;
                                    line-height: 1.04rem;
                                }

                                .hot {
                                    display: flex;
                                    align-items: center;
                                    margin-top: 0.5rem;

                                    div {
                                        display: flex;
                                        align-items: center;
                                        font-weight: 400;
                                        font-size: 0.94rem;
                                        color: #999999;
                                        width: 280px;

                                        img {
                                            width: 1.2rem;
                                            height: 1.09rem;
                                            margin-right: 5px;
                                        }

                                        &:nth-child(2) {
                                            img {
                                                width: 0.99rem;
                                                height: 0.99rem;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

}

.erji {
    font-weight: 400;
    font-size: 0.73rem;
    margin-bottom: 0.52;
    width: 40.58rem;
    min-height: 5rem;

    p {
        font-weight: 400;
        font-size: 0.73rem;
        color: #D41F19 !important;
        margin-bottom: 0.52;

    }

    .erji_list {
        display: inline-block;
        font-weight: 400;
        font-size: 0.93rem;
        color: #666666;
        margin-right: 0.5rem;
        margin-bottom: 0.5rem;

        span {
            cursor: pointer;

            &:nth-child(2) {
                margin-left: .5rem;
            }
        }
    }
}

.pdao {
    overflow: hidden;
    width: 100%;
}

/*滚动条样式*/
.infinite-list::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 0 !important;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 0.0002rem !important;
}

.infinite-list::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 0.26042rem !important;

    -webkit-box-shadow: inset 0 0 0.26042rem rgba(0, 0, 0, 0.2) !important;
    background: rgba(0, 0, 0, 0.2) !important;
}

.HoverMenu {
    padding: 20px;
    position: absolute;
    left: 300px;
    background-color: #fff;
    z-index: 333;
    top: 0;
    width: 800px;
    height: 640px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1)
}

//.infinite-list::-webkit-scrollbar-track {
/*滚动条里面轨道*/
// -webkit-box-shadow: inset 0 0 0.26042rem rgba(0, 0, 0, 0.2) !important;
// border-radius: 0 !important;
// background: rgba(0, 0, 0, 0.1) !important;
@media screen and (max-width: 768px) {
    .swiper-pagination-bullet-active {
        background-color: #fff;
    }

    .main-con {
        width: 100vw;

        .wrap-con {
            .list_banner {
                .swiper-containers {
                    width: 100vw;
                    height: 200px;

                    .swiper-button-next,
                    .swiper-button-prev {
                        display: none;
                    }

                    .swiper-pagination {
                        display: block !important;
                    }

                    ::v-deep .swiper-pagination-bullet {
                        width: 8px;
                        height: 8px;
                        border: 1px solid #fff;
                        opacity: 1;
                        background-color: transparent;
                        margin: 0 4px;
                    }

                    ::v-deep .swiper-pagination-bullet-active {
                        background-color: #fff;
                    }

                    .swiper-container {
                        width: 100%;
                        height: 200px;

                    }

                    .sildTitle {
                        display: none;
                    }
                }

                .menu {
                    display: none
                }
            }

            .main_cont {
                .left {
                    display: none;
                }

                .rightMain {
                    width: 100vw;
                    box-sizing: border-box;
                    padding: 0 10px 0;

                    .course {
                        width: 100%;
                        flex-direction: column;
                        flex-wrap: nowrap;
                        margin-bottom: 10px;

                        >div {
                            margin: 0;
                            width: 100%;
                            border-radius: 10px;
                            height: 150px;
                            margin-bottom: 10px;
                            padding: 20px;

                            &:nth-child(3n-1) {
                                margin: 0;
                                margin-bottom: 10px;
                            }

                            .title {
                                font-size: 18px;
                                margin-bottom: 5px;
                            }

                            span {
                                font-size: 16px;
                            }
                        }
                    }

                    .contentList {
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;

                        .type {
                            width: 100%;

                            .tab {
                                margin: 10px 0;
                                height: auto;
                                top: calc(13.02083vw + 60px);

                                >div {
                                    margin: 0 5px;
                                    flex-wrap: wrap;

                                    .botLine {
                                        width: 50%;
                                        height: 3px;
                                        left: 25%;
                                    }

                                    font-size: 15px;

                                    >div {
                                        // height: 100%;
                                        // flex: 1;
                                        width: auto;
                                        padding: 10px 20px;
                                    }
                                }

                                .title {
                                    font-size: 16px;
                                }
                            }
                        }

                        .list {
                            .list_box {
                                padding: 10px;
                                width: 100%;
                                height: 120px;
                                margin-bottom: 10px;

                                >img {
                                    width: 70px;
                                    height: 70px;
                                }

                                .list_t {
                                    margin-left: 15px;

                                    >span {
                                        font-size: 16px;
                                    }

                                    >div {
                                        >span {
                                            font-size: 16px;
                                        }

                                        >div {
                                            font-size: 13px;

                                            img {
                                                width: 15px;
                                                height: 9px;
                                                margin-right: 5px;
                                            }
                                        }
                                    }
                                }

                                .list_t2 {
                                    margin-left: 15px;
                                    flex: 1;

                                    .sign {
                                        font-size: 15px;
                                        line-height: normal;
                                    }

                                    .name {
                                        font-size: 15px;

                                        img {
                                            width: 10px;
                                            height: 10px;
                                            margin-left: 8px;
                                        }
                                    }

                                    .hot {
                                        div {
                                            font-size: 13px;

                                            &:nth-child(2) {
                                                img {
                                                    width: 15px;
                                                    height: 15px;
                                                    margin-right: 5px;
                                                }
                                            }

                                            img {
                                                width: 15px;
                                                height: 15px;
                                                margin-right: 5px;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .typeChose {
        top: 13.02083vw;
        background-color: #fff;
        position: sticky;
        font-size: 14px;
        display: flex;
        align-items: center;
        height: 60px;
        justify-content: space-around;

        div {
            width: 100px;
            border-radius: 10px;
            background-color: #cac8c8;
            color: #fff;
            padding: 10px 15px;
            text-align: center;
        }

        .active {
            background-color: #1068E7;
            color: #fff;
        }
    }
}
</style>